<template>
	<view class="orderDeta">
		<view class="table">
			<view class="header">
				<view class="item first"></view>
				<view class="item">识别</view>
				<view class="item">数量</view>
				<view class="item">价格</view>
			</view>
			<view class="content">
				<view class="row">
					<view class="cell red">装运单号</view>
					<view class="cell flex3">
						<uv-textarea height="40" v-model="ocr_data.express_sn" border="none"></uv-textarea>
					</view>
				</view>
				<view class="row">
					<view class="cell red">车号</view>
					<view class="cell flex3">
						<uv-textarea height="40" v-model="ocr_data.car_no" border="none"></uv-textarea>
					</view>
				</view>
				<view class="row">
					<view class="cell red">物流名称</view>
					<view class="cell flex3">
						<uv-textarea height="40" v-model="ocr_data.express_name" border="none"></uv-textarea>
					</view>
				</view>

				<!-- 第一个盖雨布,需要特殊处理 -->
				<view class="row cover_row">
					<view class="cell">盖雨布梯度</view>
					<view class="cell" @click="open_picker">
						{{special.level}}
						<view class="arrow">
							<uv-icon name="arrow-down"></uv-icon>
						</view>
					</view>
					<view class="cell"></view>
					<view class="cell">{{special.pre_price}}</view>
				</view>

				<view class="row" v-for="(item,index) in list" :key="index">
					<view class="cell">{{item.title}}</view>
					<view class="cell">单价/{{item.pre_price}}</view>
					<view class="cell">
						<input type="number" min="0" v-model="item.num" @input="change($event,item)">
					</view>
					<view class="cell">{{item.total}}</view>
				</view>
				<view class="row">
					<view class="cell total">总价</view>
					<view class="cell"></view>
					<view class="cell"></view>
					<view class="cell total">{{totalPrice}}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="cancel" @click="cancel">取消</view>
			<view class="submit" @click="submit">保存</view>
		</view>

		<uv-picker ref="picker" keyName="level" :columns="columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		nextTick
	} from "vue"
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		indexOcr,
		workCategory,
		level,
		createOrder
	} from '@/util/request/api.js';

	let list = ref([]);
	// const totalPrice = computed(() => list.value.reduce((sum, item) => sum + item.pre_price * item.num, 0));
	const totalPrice = computed(() => list.value.reduce((sum, item) => sum + item.pre_price * item.num, special.value
		.pre_price));

	const picker = ref(false);
	// const columns =ref([
	// 	[13, 15, 20, 30, 33, 35]
	// ]);

	const columns = ref([]);
	let indexs = [0];

	let special = ref({
		level: 0,
		pre_price: 0
	});
	const open_picker = () => {
		picker.value.open();
		picker.value.setIndexs(indexs, true);
	};

	const confirm = (e) => {
		indexs = e.indexs;
		special.value = e.value[0];
	};

	const change = (e, item) => {
		let value = e.detail.value;
		let filtered = value.replace(/[^\d]/g, '');
		if (filtered === '') value = 0;
		if (value < 0) value = 0;;

		if (value > 0 && filtered.length > 1 && filtered[0] === '0') {
			filtered = filtered.replace(/^0+/, '');
			value = parseInt(filtered, 10);
		}
		nextTick(() => {
			item.num = value;
			e.detail.value = value;
			let quantity = Number(e.detail.value);
			item.total = item.pre_price * quantity;
		});
	};

	let ocr_data = ref({
		car_no: "",
		express_name: "",
		express_sn: ""
	});

	onLoad(async () => {
		let ocr_url = uni.getStorageSync('ocr_url');
		// ocr_url = "https://app.yunxinzhuangxie.cn/uploads/20250829/07c66a3a375aa842e858a9116a3881fc.jpg";

		let ocr_res = await indexOcr({
			url: ocr_url
		});
		ocr_data.value = ocr_res ? ocr_res : ocr_data.value;

		let res = await workCategory();
		let temp = res.map(item => ({
			...item,
			pre_price: Number(item.pre_price) || 0,
			num: 0,
			total: 0
		}));
		list.value = temp;

		// 盖雨布需要特殊处理
		let data = await level();
		columns.value = [data];
		special.value = data[0];
	});

	const submit = async () => {
		await createOrder({
			express_sn: ocr_data.value.express_sn,
			car_no: ocr_data.value.car_no,
			express_name: ocr_data.value.express_name,
			detail_json: JSON.stringify(list.value),
			total_price: totalPrice.value,
			level: special.value.level
		});
		uni.$uv.toast("创建成功");
		setTimeout(() => {
			uni.redirectTo({
				url: '/pagesA/my/order'
			})
		}, 1500);
	};
	const cancel = () => uni.navigateBack();
	onUnload(() => uni.removeStorageSync('ocr_url'));
</script>

<style lang="scss" scoped>
	.orderDeta {
		min-height: calc(100vh - var(--window-top));
		padding: 0 20rpx 150rpx;
		box-sizing: border-box;
		background-color: #fff;

		.table {
			border-radius: 10rpx;
			overflow: hidden;

			.header {
				border-left: 1rpx solid #2282FC;
				border-right: 1rpx solid #2282FC;
				box-sizing: border-box;
				background-color: #2282FC;
				display: flex;
				justify-content: space-between;

				.item {
					flex: 1;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					border-left: 1rpx solid #F1F3F7;
					box-sizing: border-box;

					&.first {
						flex: 0 0 188rpx;
						border-left: none;
					}
				}
			}

			.content {
				border: 1rpx solid #F1F3F7;
				box-sizing: border-box;

				.row {
					display: flex;
					justify-content: space-between;

					&:nth-child(2n) {
						background: rgba(34, 130, 252, 0.05);
					}

					&.cover_row {
						.cell {
							height: 200rpx;
						}
					}

					.cell {
						flex: 1;
						min-height: 68rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: 500;
						border-left: 1rpx solid #F1F3F7;
						padding: 20rpx 10rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;

						&:first-child {
							flex: 0 0 188rpx;
							border-left: none;
						}

						&:nth-child(even) {
							font-weight: 400;
						}

						&>input {
							text-align: center;
							color: #333333;
							font-size: 28rpx;
							font-weight: 500;
						}

						.arrow {
							margin-left: 10rpx;
						}

						&.red {
							color: #FF0000;
						}

						&.total {
							font-size: 32rpx;
						}

						&.flex3 {
							flex: 3;
						}
					}
				}
			}
		}

		.footer {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;

			view {
				width: 330rpx;
				height: 88rpx;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.cancel {
				color: #2282FC;
				font-size: 28rpx;
				font-weight: 400;
				border: 1rpx solid #2282FC;
			}

			.submit {
				color: #FFFFFF;
				font-weight: 600;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 92, 255, 0.3);
				background: #2282FC;
			}
		}
	}
</style>